<template>
  <div class="remark back-page">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-1 wd-75 center strong" style="color: white">备注信息</div>
      </template>
    </HeaderTop>
    <section class="mt-2 py-4 back-white px-4">
      <header class="text-1 fs-4">快速备注</header>
      <ul class="remark-list fs-5 text-2">
        <li class="mr-3 mt-4" v-for="(item, index) in remarkList" :key="index">
          <span
            v-for="tag in item"
            :key="tag"
            @click="chooseTag(tag, index)"
            :class="{ 'tag-active': tagList[index] && tagList[index] == tag }"
            >{{ tag }}</span
          >
        </li>
      </ul>
    </section>
    <section class="mt-2">
      <van-cell-group>
        <van-field
          v-model="remarkInfo"
          rows="3"
          autosize
          label="其他备注"
          type="textarea"
          maxlength="100"
          placeholder="可以不填"
          show-word-limit
        />
      </van-cell-group>
    </section>
    <div class="mt-6 mx-4">
      <van-button round block type="success" @click="addRemark" :disabled="btnIsShow">
        确定
      </van-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, computed } from "vue";
import { getRemark } from "@/api";
import { Remark_format } from "@/type/index";
import { useRouter } from "vue-router";
import { user } from "@/store/index";
import { storeToRefs } from "pinia";
const props = defineProps({
  mark_id: String,
});
const router = useRouter();
const { remark: AllRemark } = storeToRefs(user());
//获取快速备注列表
const remarkList = ref<string[][]>([]);
//初始化数据
const initData = async () => {
  const { remarks } = await getRemark<Remark_format>(props.mark_id);
  remarkList.value = remarks;
  console.log(remarkList.value);
};
//选中的备注标签
const tagList = ref({});
const chooseTag = (tag, index) => {
  !tagList.value[index] == undefined
    ? (tagList.value[index] = tag)
    : tagList.value[index] == tag
    ? (tagList.value[index] = null)
    : (tagList.value[index] = tag);
};

//自定义备注
const remarkInfo = ref<string>("");
//是否有填写备注
const btnIsShow = computed(() => {
  return !(Object.values(tagList.value).filter(item => item !== null).length || remarkInfo.value);
});
const addRemark = () => {
  AllRemark.value =
    Object.values(tagList.value)
      .filter(item => item !== null)
      .join("，") + remarkInfo.value;
  router.back();
};
//调用初始化函数
initData();
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.remark {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 21;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  .remark-list {
    display: flex;
    flex-wrap: wrap;

    li {
      border-radius: 0.2rem;
      border: 0.02rem solid $blue;
      overflow: hidden;
      span {
        display: inline-block;
        border-right: 0.02rem solid $blue;
        padding: 0.24rem 0.4rem;
        &:last-child {
          border-right: none;
        }
      }
      .tag-active {
        background-color: $blue;
        color: white;
      }
    }
  }
}
</style>
